<template>
	<div class="cost">
		<h2 class="cost-instruction">费用说明</h2>
		<ul class="cost-detail">
			<li class="cost-detail-title"><h3>{{getBaseMsg.costContain}}</h3></li>
			<li v-for="(item, index) in getBaseMsg.containDetail">{{item}}</li>
		</ul>
		<ul class="cost-detail">
			<li class="cost-detail-title"><h3>{{getBaseMsg.costExclusive}}</h3></li>
			<li v-for="(item, index) in getBaseMsg.exclusiveDetail">{{item}}</li>
		</ul>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default{
		name: 'costInstruction',
		computed: {
  		...mapGetters([
      	'getBaseMsg'
    	])
 	  }
	}
</script>

<style scoped lang="scss">
	$verticalDistance: 1rem;
	$horizontalDistance: 1.63rem;
	.cost{
		margin-left: $horizontalDistance;
		padding-bottom: $verticalDistance;
		.cost-instruction{
			padding: $verticalDistance 0;
			border-bottom: 1px solid #E1E1E1;
			font-family: ".PingFang-SC-Semibold";
			font-size: 1.36rem;
			color: #333;
			line-height: 1.36rem;
		}
		.cost-detail{
			font-family: PingFangSC-Regular;
			font-size: 1.28rem;
			color: #777;
			line-height: 2rem;
			.cost-detail-title{
				font-family: PingFangSC-Medium;
				font-size: 1.28rem;
				color: #333;
				line-height: 1.28rem;
				margin: $verticalDistance 0;
			}
		}	
	}
</style>